<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> menu</title>
	<link href="../resources/css/ligerui-all.css" rel="stylesheet" type="text/css" /> 
 	<link href="../resources/css/ligerui-icons.css" rel="stylesheet" type="text/css" /> 
	<script src="../resources/js/jquery-1.9.1.min.js" type="text/javascript"></script>
	<script src="../resources/js/ligerui.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../resources/js/jquery.validate.min.js"></script>
	<script type="text/javascript" src="../resources/js/jquery.metadata.js"></script>
	<script type="text/javascript" src="../resources/js/messages_cn.js"></script>
	<script type="text/javascript" src="../resources/js/form-validate.js"></script>
    <script type="text/javascript">
        $(function ()
        {
            window['menu'] = $("#menus").ligerTree({ 
                checkbox: false,
                url:'list',
                idFieldName :'menuNO',
	            parentIDFieldName :'parentNO',
	            textFieldName : 'menuName',
	            onClick : noteClick,
	            nodeWidth: 665
             });

            $.metadata.setType("attr", "validate");
	          $("#form1").validate({
	         	 errorPlacement: errorPlacement,
	         	 success: mess
	          });
            
            $("form").ligerForm();
        });

        var noteClick = function(note) {
            if(note.data){
	            $("#menuName").val(note.data.menuName);
	            $("#menuAction").val(note.data.menuAction);
	            $("#menuFullPath").val(note.data.menuFullPath);
            }
         };
        
        //增加节点
        function addTreeItem()
        {
            var node = menu.getSelected();
            if(node){
	            var menuFullPath = node.data.menuFullPath + ">" + $("#menuName").val();
	            $("#menuNO").val(node.data.menuNO);
	            $("#menuFullPath").val(menuFullPath);
	            $("#form1").prop("action", "add");
	            $("#form1").submit();
            }else {
            	var menuFullPath = $("#menuName").val();
 	            $("#menuNO").val("0");
 	            $("#menuFullPath").val(menuFullPath);
 	            $("#form1").prop("action", "add");
 	            $("#form1").submit();
            }
        }

        //修改节点
        function updateTreeItem()
        {
            var node = menu.getSelected();
            if(node) {
            $("#menuNO").val(node.data.menuNO);
            //替换一起导航的名称
            $("#menuFullPath").val(node.data.menuFullPath);
            $("#form1").prop("action", "update");
            $("#form1").submit();
            }else {
            	$.ligerDialog.warn('请选择一个节点!');
            }
        }

        //删除节点
        function removeTreeItem()
        {
        	var node = menu.getSelected();
        	if(node) {
        		$.ligerDialog.confirm("您真的要删除[<span style='color:red; font-weight: bold'>" + node.data.menuName + "</span>]及其以下的子菜单吗?", function (yes) { 
        			if(yes){
            			 window.location.href="delete/" + node.data.menuNO;
        			}
        		})
        	}else {
        		$.ligerDialog.warn('请选择一个节点!');
            }
        }
    </script>
    <style type="text/css">
        .l-table-edit-td{ padding:3px;}
        .l-verify-tip{ left:230px; top:120px;}
    </style>
</head>
<body style="padding:10px">
<!-- 1.导航条 -->
   <span style=" margin: 5px 10px; display: block; font-weight: bold;">宝华茶餐厅 > 菜单管理 > 菜单设定</span>
	<form method="post" id="form1"> 
	<table cellpadding="0" cellspacing="0" width="800">
    <tr>
       <td class="l-table-edit-td" width="60">菜单名称: </td>
       <td class="l-table-edit-td" width="180">
          <input type="text" ltype="l-text"  id="menuName" name="menuName" validate="{required:true,maxlength:20}"/>
       </td>
       <td align="left" width="20px"></td>
       <td class="l-table-edit-td" width="60">菜单路径: </td>
	   <td class="l-table-edit-td" width="180">
	      <input type="hidden" ltype="l-text" id="menuNO" name="menuNO"/> 
          <input type="text" ltype="l-text" id="menuAction" name="menuAction" /> 
       </td>
       <td align="left" width="20px"></td>
        <td class="l-table-edit-td" width="60">菜单导航: </td>
       <td class="l-table-edit-td" width="180">
         <input type="text" ltype="l-text" id="menuFullPath" name="menuFullPath" readonly="readonly"/>
       </td>
       <td align="left" width="20px"></td>
    </tr>
    <tr>
       <td class="l-table-edit-td" colspan="9" align="right">
          <a class="l-button" onclick="removeTreeItem()" style="display:block; float:right; margin-right:20px; margin-top: 10px; margin-bottom: 10px">删除节点</a>
          <a class="l-button" onclick="updateTreeItem()"  style="display:block; float:right; margin-right:10px; margin-top: 10px; margin-bottom: 10px">更新节点</a>
          <a class="l-button" onclick="addTreeItem()"  style="display:block; float:right; margin-right:10px; margin-top: 10px; margin-bottom: 10px">增加节点</a>
       </td>
    <tr>
    </table> 
    </form>
     
    <div id="menus" style="height:350px; width:665px; border:1px solid #ccc; overflow:auto; clear:both;">
    </div>
</body>
</html>